<template>
	<view class="page-tab-content">
		<view class="page-top-content">
			<view class="status_bar"> </view>
			<!--导航栏-->
			<uni-nav-bar dark :fixed="true" background-color="#ff90af" right-icon="contact-filled"
				left-icon="shop-filled" :title="sConf.pos?.nicename" @clickRight="showUser" @clickLeft="showStore" />

			<!--轮播组件-->
			<uni-swiper-dot class="uni-swiper-dot-box" field="content" :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="dotChange">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item">
							<img :src="item.url" alt="" srcset="" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!--滑动页面-->
		<scroll-view :style="{height:screenHeight+'px'}" scroll-top="0" scroll-y="true" class="scroll-Y">
			<uni-grid :column="3" :highlight="true" @change="gridChange">
				<uni-grid-item v-for="(item, index) in array" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<uni-icons :type="item.icon" :size="48" color="#007aff" />
						<text class="grid-item-text">{{item.content}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</scroll-view>
		<!-- 补充高度 -->
		<view class="page-bottom-content">hhh</view>
		<!-- 侧边页 -->
		<uni-drawer ref="showlogin" mode="left" :width="320">
			<login></login>
		</uni-drawer>
		<uni-popup ref="showpos" type="bottom" border-radius="10px 10px 0 0">
			<store></store>
		</uni-popup>
		<uni-popup ref="showuser" type="bottom" border-radius="10px 10px 0 0">
			<userinfo></userinfo>
		</uni-popup>
	</view>
</template>

<script>
	import login from '/pages/login/login.vue'
	import store from '/pages/store/store.vue'
	import userinfo from '/pages/userinfo/userinfo.vue'
	export default {
		data() {
			return {
				sConf: getApp().globalData,
				pH: 0, // 窗口高度
				screenHeight: 0, // 滚动高度
				title: '客勤页面',
				info: [{
						colorClass: 'uni-bg-red',
						url: 'static/blender.jpeg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'static/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'http://192.168.1.216:8100/static/images/shuijiao.jpg',
						content: '内容 C'
					}
				],
				current: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: 'rgba(255, 144, 175,0.1)',
					border: '1px rgba(255, 144, 175,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 144, 175,0.7)',
					selectedBorder: '1px rgba(255, 144, 175,0.9) solid'
				},
				array: [{
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}, {
					icon: 'email-filled',
					content: '预置页面',
					url: '/pages/demo/demo'
				}]
			}
		},
		onLoad() {
			var that = this;
			uni.$on('changePos', function(res) {
				that.hideStore();
			});
			uni.$on('logout', function(res) {
				that.hideUser();
				that.sConf.auth = null;
				that.sConf.user = null;
				that.sConf.pos = null;
				that.sConf.token = null;
				uni.removeStorage({key:"pos"});
				uni.reLaunch({
					url: '/pages/login/login'
				});
			});
		},
		onUnload() {
			uni.$off('changePos');
			uni.$off('logout');
		},
		onReady() {
			// 检测登录
			if (!getApp().globalData.auth) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
			// 滚动计算
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.pH = res.windowHeight;
					let titleH = uni.createSelectorQuery().select('.scroll-Y');
					titleH.boundingClientRect(data => {
						let pH = that.pH;
						that.screenHeight = pH - data.top;
					}).exec();
				}
			});

		},
		components: {
			login,
			store,
			userinfo
		},
		methods: {
			showUser() {
				this.$refs.showuser.open();
			},
			showStore() {
				this.$refs.showpos.open();
			},
			hideUser() {
				this.$refs.showuser.close();
			},
			hideStore() {
				this.$refs.showpos.close();
			},
			dotChange(e) {
				this.current = e.detail.current
			},
			gridChange(e) {
				let index = e.detail.index;
				let turl = this.array[index].url;
				uni.navigateTo({
					url: turl
				});
			}
		}
	}
</script>

<style lang="scss">
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
		background-color: #cee1fd;
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;

		.grid-item-text {
			font-size: $uni-font-size-base;
		}
	}
</style>